<template>
  <div class="student-list-container">
    <!-- 顶部操作栏：新增按钮 + 搜索表单，居中布局 -->
    <div class="top-bar">
      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="学生姓名">
          <el-input v-model="queryParams.name" placeholder="请输入学生姓名" clearable />
        </el-form-item>
        <el-form-item label="学生班级">
          <el-input v-model="queryParams.className" placeholder="请输入学生班级" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="fetchStudentList">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 中间内容容器，限制宽度并居中 -->
    <div class="content-wrapper">
      <!-- 表格展示，增加 hover 高亮、条纹效果 -->
      <el-table 
        :data="studentList" 
        border 
        size="small"
        :row-key="row => row.id"
        v-loading="loading"
        stripe
        highlight-current-row
      >
        <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>
        <el-table-column prop="age" label="年龄" width="80" align="center"></el-table-column>
        <el-table-column prop="gender" label="性别" width="80" align="center">
          <template v-slot="scope">
            <el-tag type="success" v-if="scope.row.gender === '女'">女</el-tag>
            <el-tag type="info" v-else>男</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="className" label="班级" width="120" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template v-slot="scope">
            <el-button type="text" icon="el-icon-view" @click="toDetails(scope.row.id)" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件，外层用 div 包裹并设置居中样式 -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryParams.pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StudentList',
  data() {
    return {
      studentList: [], // 学生列表数据
      total: 0, // 总条数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        className: ''
      },
      loading: false, // 加载状态
      // 写死的学生数据
      mockStudentData: [
        { id: 1, name: '张三', age: 18, gender: '男', className: '一班' },
        { id: 2, name: '李四', age: 19, gender: '男', className: '一班' },
        { id: 3, name: '王五', age: 18, gender: '女', className: '二班' },
        { id: 4, name: '赵六', age: 20, gender: '男', className: '二班' },
        { id: 5, name: '孙七', age: 19, gender: '女', className: '一班' },
        { id: 6, name: '周八', age: 21, gender: '男', className: '三班' },
        { id: 7, name: '吴九', age: 18, gender: '女', className: '三班' },
        { id: 8, name: '郑十', age: 19, gender: '男', className: '二班' },
        { id: 9, name: '钱十一', age: 20, gender: '女', className: '一班' },
        { id: 10, name: '冯十二', age: 21, gender: '男', className: '三班' },
        { id: 11, name: '陈十三', age: 18, gender: '女', className: '二班' },
        { id: 12, name: '褚十四', age: 19, gender: '男', className: '一班' }
      ]
    };
  },
  created() {
    this.fetchStudentList();
  },
  methods: {
    // 获取学生列表（使用写死数据）
    fetchStudentList() {
      this.loading = true;
      // 模拟接口请求延迟
      setTimeout(() => {
        try {
          let filteredData = [...this.mockStudentData];
          // 姓名筛选
          if (this.queryParams.name) {
            filteredData = filteredData.filter(item => 
              item.name.includes(this.queryParams.name)
            );
          }
          // 班级筛选
          if (this.queryParams.className) {
            filteredData = filteredData.filter(item => 
              item.className.includes(this.queryParams.className)
            );
          }
          // 分页处理
          const startIndex = (this.queryParams.pageNum - 1) * this.queryParams.pageSize;
          const endIndex = startIndex + this.queryParams.pageSize;
          this.studentList = filteredData.slice(startIndex, endIndex);
          this.total = filteredData.length;
        } catch (error) {
          this.$message.error(`处理学生数据异常：${error.message || '未知错误'}`);
          this.studentList = [];
          this.total = 0;
        } finally {
          this.loading = false;
        }
      }, 500);
    },
    // 每页条数变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.fetchStudentList();
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.fetchStudentList();
    },
    // 重置查询条件
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: '',
        className: ''
      };
      this.fetchStudentList();
    },
    // 跳转到详情页
    toDetails(id) {
      this.$router.push({
        path: '/student/details',
        query: { id }
      });
    },
  }
};
</script>

<style scoped>
.student-list-container {
  padding: 20px;
}

.top-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.add-btn {
  margin-right: 20px;
}

.search-form {
  display: flex;
  align-items: center;
}

.search-form .el-form-item {
  margin-right: 15px;
}

.content-wrapper {
  max-width: 800px; /* 限制内容宽度，可根据需求调整 */
  margin: 0 auto; /* 水平居中 */
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 表格 hover 行背景色可根据喜好调整，这里用 Element UI 默认的即可 */
</style>